window.addEventListener(`load`, function () {
    // 获取元素
    let btn = this.document.querySelector(`.btn`)
    let batch = this.document.querySelector(`#batch`)

    // 班级人数
    let total = this.document.querySelector(`.total`)
    // 期望薪资
    let avgSalary = this.document.querySelector(`.avgSalary`)
    // 平均年龄
    let avgAge = this.document.querySelector(`.avgAge`)
    // 男女比例
    let proportion = this.document.querySelector(`.proportion`)

    // 班级概况
    axios({
        url: `/student/overview`
    }).then(({ data: { data } }) => {
        // console.log(data);
        total.innerHTML = data.total
        avgSalary.innerHTML = data.avgSalary
        avgAge.innerHTML = data.avgAge
        proportion.innerHTML = data.proportion
    })

    // 获取源数据
    axios({
        url: `/student/list`
    }).then(({ data: { data } }) => {
        // console.log(data);
        let pieArr = []
        let names = [], salarys = [], truesalarys = []

        data.forEach(function (value, index) {
            let res = pieArr.filter(function (v) {
                return v.name == value.province
            })[0]
            if (res) {
                res.value++
            } else {
                pieArr.push({ value: 1, name: value.province })
            }
            // 获取折线图数据
            names.push(value.name)
            salarys.push(value.salary)
            truesalarys.push(value.truesalary)
        })

        drawPie(pieArr)
        drawLine(names, salarys, truesalarys)
    })

    // 籍贯饼图
    function drawPie(obj) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector(`.pie`));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '籍贯 HomeTown',
                left: 'left'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            series: [
                {
                    name: '各地人员分布',
                    type: 'pie',
                    radius: [20, 150],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: obj
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    // 薪资折线图
    function drawLine(names, salarys, truesalarys) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector(`.line`));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '薪资 Salary'
            },
            xAxis: {
                type: 'category',
                data: names
            },
            legend: {
                data: ['期望薪资', '实际薪资']
            },
            yAxis: {
                type: 'value'
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '2%',
                right: '2%',
                bottom: '20%',
                containLabel: true
            },
            dataZoom: [
                {
                    start: 0,
                    end: 100
                }
            ],
            series: [
                {
                    name: '期望薪资',
                    data: salarys,
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        color: 'red',
                        width: 3
                    },
                    symbol: 'none'

                },
                {
                    name: '实际薪资',
                    data: truesalarys,
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        color: 'blue',
                        width: 3
                    },
                    symbol: 'none'

                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    // 按组查询成绩
    function getScore(batch) {
        axios({
            url: `/score/batch`,
            params: { batch }
        }).then(res => {
            // console.log(res);
            let data = res.data.data
            if (data) {
                drawBar(data)
            } else {
                toastr.warning(res.data.message)
            }
        })
    }
    getScore(1)

    // 成绩柱状图
    function drawBar(obj) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector(`.barChart`));

        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data: ['平均分', '低于60分人数', '60-80分之间', '高于80分人数']
            },
            xAxis: [
                {
                    type: 'category',
                    data: obj.group,
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    min: 0,
                    max: 100,
                    interval: 10,
                    axisLabel: {
                        formatter: '{value} 分'
                    }
                },
                {
                    type: 'value',
                    min: 0,
                    max: 10,
                    interval: 1,
                    axisLabel: {
                        formatter: '{value} 人'
                    }
                }
            ],
            grid: {
                left: '2%',
                right: '2%',
                bottom: '2%',
                containLabel: true
            },
            series: [
                {
                    name: '平均分',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' 分';
                        }
                    },
                    data: obj.avgScore
                },
                {
                    name: '低于60分人数',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' 人';
                        }
                    },
                    data: obj.lt60,
                    yAxisIndex: 1
                },
                {
                    name: '60-80分之间',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' 人';
                        }
                    },
                    data: obj.gt60,
                    yAxisIndex: 1
                },
                {
                    name: '高于80分人数',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' 人';
                        }
                    },
                    data: obj.gt80,
                    yAxisIndex: 1
                },

            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
    // drawBar()

    btn.addEventListener(`click`, function () {
        if (batch.style.display == `block`) {
            batch.style.display = `none`
        } else {
            batch.style.display = `block`
        }
    })
    batch.addEventListener(`click`, function (e) {
        // console.log(e);
        if (e.target.localName == `a`) {
            // console.log(`a`);
            getScore(e.target.dataset.batch)
        }
    })

})